<template>
  <ele-page flex-table>
    <!-- 搜索表单 -->
    <UserSearch @search="reload" />
    <ele-card class="page-flex-full">
      <!-- 表格 -->
      <ele-pro-table
        ref="tableRef"
        row-key="id"
        :columns="columns"
        :datasource="datasource"
        :show-overflow-tooltip="true"
        highlight-current-row
        cache-key="MchSystemUserTable"
      >
        <template #toolbar>
          <el-button type="primary" class="ele-btn-icon" :icon="Plus" @click="openEdit()">
            新增
          </el-button>
        </template>
        <!-- 头像 -->
        <template #thumb="{ row }">
          <el-avatar :class="row.thumb ? 'block mx-auto' : ''" shape="square" :size="30" :src="row.thumb" :icon="UserFilled" />
        </template>
        <template #roles="{ row }">
          <el-tag
            v-for="item in row.roles"
            :key="item.id"
            size="small"
            :disable-transitions="true"
            style="margin-right: 6px"
          >
            {{ item.name }}
          </el-tag>
        </template>
        <template #status="{ row }">
          <el-tag v-if="row.status === 1" type="success">正常</el-tag>
          <el-tag v-else type="danger">停用</el-tag>
        </template>
        <template #qywx_status="{ row }">
          <el-switch
            v-model="row.qywx_status"
            :loading="qywxLoading"
            @change="qywxStatusChange(row)"
          />
        </template>
        <template #action="{ row }">
          <!-- <el-link type="primary" disabled underline="never" @click="openBanSupplier(row)">
            绑定货主
          </el-link>
          <el-divider direction="vertical" /> -->
          <el-link type="primary" underline="never" @click="openBanWarehouse(row)">
            绑定仓库
          </el-link>
          <el-divider direction="vertical" />
          <el-link type="primary" underline="never" @click="openEdit(row)">
            编辑
          </el-link>
          <el-divider direction="vertical" />
          <el-popconfirm
            :width="170"
            confirm-button-type="danger"
            :title="`确定删除用户『${row.nickname || row.realname}』吗?`"
            @confirm="remove(row.id)"
          >
            <template #reference>
              <el-link type="danger" underline="never">
                删除
              </el-link>
            </template>
          </el-popconfirm>
        </template>
      </ele-pro-table>
    </ele-card>
    <!-- 编辑弹窗 -->
    <UserEdit v-model="showEdit" :data="current" @done="reload" />

    <BanWarehouse v-model="showBanWarehouse" :data="current" :type="1" @done="reload" />
    <BanSupplier v-model="showBanSupplier" :data="current" @done="reload" />
  </ele-page>
</template>

<script setup>
import {
  pageUser,
  removeUser,
} from '@/api/mch-system/user'
import { Plus, UserFilled } from '@element-plus/icons-vue'
import BanSupplier from './components/ban-supplier.vue'
import BanWarehouse from './components/ban-warehouse.vue'
import UserEdit from './components/user-edit.vue'
import UserSearch from './components/user-search.vue'

defineOptions({
  name: 'SystemMchUser',
})

/** 表格实例 */
const tableRef = ref(null)

const qywxLoading = ref(false)

/** 表格列配置 */
const columns = ref([
  {
    prop: 'id',
    label: 'ID',
    width: 50,
    showOverflowTooltip: true,
    fixed: 'left',
  },
  {
    prop: 'nickname',
    label: '用户名',
    showOverflowTooltip: true,
    minWidth: 100,
  },
  {
    prop: 'username',
    label: '登录账号',
    showOverflowTooltip: true,
    minWidth: 100,
  },
  {
    prop: 'mobile',
    label: '手机号',
    minWidth: 100,
  },
  {
    columnKey: 'thumb',
    label: '头像',
    minWidth: 80,
    slot: 'thumb',
    align: 'center',
  },
  {
    prop: 'qywx_status',
    label: '企微推送',
    align: 'center',
    minWidth: 80,
    slot: 'qywx_status',
  },
  {
    prop: 'status',
    label: '状态',
    minWidth: 80,
    slot: 'status',
    align: 'center',
    formatter: row => row.status === 1 ? '正常' : '禁用',
  },
  {
    prop: 'last_login_ip',
    label: '最后登录IP',
    width: 160,
    align: 'center',
  },
  {
    prop: 'last_login_time',
    label: '最后登录时间',
    width: 160,
    formatter: (row, column, cellValue) => {
      return cellValue ? utils.formatDate(cellValue) : '-'
    },
    align: 'center',
  },
  {
    prop: 'create_time',
    label: '创建时间',
    width: 160,
    formatter: (row, column, cellValue) => {
      return cellValue ? utils.formatDate(cellValue) : '-'
    },
    align: 'center',
  },
  // {
  //   prop: 'update_time',
  //   label: '更新时间',
  //   width: 160,
  //   formatter: (row, column, cellValue) => {
  //     return cellValue ? utils.formatDate(cellValue) : '-'
  //   },
  //   align: 'center',
  // },
  {
    columnKey: 'action',
    label: '操作',
    width: 200,
    slot: 'action',
    align: 'right',
    fixed: 'right',
  },
])

/** 当前编辑数据 */
const current = ref(null)

/** 是否显示编辑弹窗 */
const showEdit = ref(false)
const showBanWarehouse = ref(false)
const showBanSupplier = ref(false)

/** 表格数据源 */
async function datasource({ page, limit, where, orders }) {
  const res = await pageUser({ ...where, ...orders, page, limit })
  res.data.forEach((v) => {
    v.qywx_status = v.qywx_userid_status === 2
  })
  return res
}

/** 搜索 */
function reload(where) {
  tableRef.value?.reload?.({ page: 1, where })
}

/** 打开编辑弹窗 */
function openEdit(row) {
  current.value = row ?? null
  showEdit.value = true
}

/** 打开绑定弹窗 */
function openBanWarehouse(row) {
  current.value = row ?? null
  showBanWarehouse.value = true
}

function openBanSupplier(row) {
  current.value = row ?? null
  showBanSupplier.value = true
}

/** 删除用户 */
function remove(id) {
  const loading = utils.message('请求中..', 'loading')
  removeUser(id)
    .then((res) => {
      utils.message(res.msg, res.success, reload)
    })
    .finally(() => {
      loading.close()
    })
}

async function qywxStatusChange(row) {
  let res = null
  qywxLoading.value = true
  if (row.qywx_status) {
    res = await utils.post('/merchant/createLink', { user_id: row.id })
  }
  else {
    res = await utils.post('/merchant/delink', { user_id: row.id })
  }
  if (!res.success) {
    row.qywx_status = !row.qywx_status
  }
  utils.message(res.msg, res.success)
  qywxLoading.value = false
}
</script>
